<script setup lang="ts">
import { ref } from 'vue';

import { useVbenDrawer } from '@vben/common-ui';

import { message } from 'ant-design-vue';

import { useVbenForm } from '#/adapter/form';
import { ${className}AddApi, ${className}EditApi, ${className}QueryByIdApi } from '#/api/${modulePath}/${businessPath}'

<#if pageParams.form.extra.existTable?? && pageParams.form.extra.existTable>
<#if pageParams.form.extra.existTreeTable?? && pageParams.form.extra.existTreeTable>
import { querySelectTableApi, querySelectTreeTableApi } from '#/api';
<#else >
import { querySelectTableApi } from '#/api';
</#if>
<#elseif pageParams.form.extra.existTreeTable?? && pageParams.form.extra.existTreeTable>
import { querySelectTreeTableApi } from '#/api';
</#if>
<#if pageParams.form.extra.existDict?? && pageParams.form.extra.existDict>
import { queryDictOptionsApi } from '#/utils';
</#if>

const record = ref({});
const [Form, formApi] = useVbenForm({
  <#if pageParams.form.base??>
  <#if pageParams.form.base.layout??>
  layout: '${pageParams.form.base.layout}',
  </#if>
  <#if pageParams.form.base.wrapperClass??>
  wrapperClass: '${pageParams.form.base.wrapperClass}',
  </#if>
  <#if pageParams.form.base.showDefaultActions??>
  showDefaultActions: ${pageParams.form.base.showDefaultActions?c},
  </#if>
  <#if pageParams.form.base.commonConfig??>
  commonConfig: {
    colon: ${pageParams.form.base.commonConfig.colon?c},
    labelWidth: ${pageParams.form.base.commonConfig.labelWidth},
    componentProps: {
      class: 'w-full',
    },
  },
  </#if>
  </#if>
  <#if pageParams.form.options??>
  schema: [
    <#list pageParams.form.options as option>
    <#if option.extra?? && option.extra.showSelect?? && option.extra.showSelect>
    {
      component: '${option.component}',
      label: '${option.label}',
      fieldName: '${option.fieldName}',
      <#if option.defaultValue??>
      defaultValue: <#if option.extra.fieldPackagePath?contains("Integer")>${option.defaultValue}<#else>'${option.defaultValue}'</#if>,
      </#if>
      <#if option.rules??>
      rules: '${option.rules}',
      </#if>
      <#if option.help?? && option.help != "">
      help: '${option.help}',
      </#if>
      <#if option.suffix?? && option.suffix != "">
      suffix: '${option.suffix}',
      </#if>
      <#if option.formItemClass?? && option.formItemClass != "">
      formItemClass: '${option.formItemClass}',
      </#if>
      <#if option.componentProps??>
      componentProps: {
        <#if option.componentProps.placeholder??>
        placeholder: '${option.componentProps.placeholder}',
        </#if>
        <#if option.component == "SparkUpload">
        listType: "text",
        </#if>
        <#if option.component == "ApiSelect" || option.component == "ApiRadioGroup">
          <#if option.component == "ApiSelect">
        allowClear: true,
        showSearch: true,
          <#elseif option.component == "ApiRadioGroup">
        buttonStyle: 'solid',
        optionType: 'button',
          </#if>
          <#if option.extra.fieldRelevanceMode == 1>
        afterFetch: (data) => {
          return data.map((item: any) => ({
            label: item.itemText,
            value: <#if option.extra.fieldPackagePath?contains("Integer")>Number.parseInt(item.itemVal)<#else>item.itemVal</#if>,
          }));
        },
          </#if>
        api: <#if option.extra.fieldRelevanceMode == 1>queryDictOptionsApi,<#else>querySelectTableApi,</#if>
        params: {
          <#if option.extra.fieldRelevanceMode == 1>
          dictCode: '${option.componentProps.params.dictCode}',
          <#else >
          tableName: '${option.componentProps.params.tableName}',
          labelField: '${option.componentProps.params.labelField}',
          valueField: '${option.componentProps.params.valueField}',
          sqlSelect: '${option.componentProps.params.sqlSelect}',
          </#if>
        },
        <#elseif option.component == "ApiTreeSelect">
        api: () =>
          querySelectTreeTableApi({
            tableName: '${option.extra.params.tableName}',
            labelField: '${option.extra.params.labelField}',
            valueField: '${option.extra.params.valueField}',
            sqlSelect: '${option.extra.params.sqlSelect}',
          }),
        labelField: 'name',
        childrenField: 'children',
        valueField: 'id',
        <#elseif option.component == "TimePicker">
        allowClear: true,
        format: 'HH:mm:ss',
        valueFormat: 'HH:mm:ss',
        <#elseif option.component == "DatePicker">
        allowClear: true,
          <#if option.componentProps.showTime?? && option.componentProps.showTime>
        showTime: true,
        format: 'YYYY-MM-DD HH:mm:ss',
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
          <#else>
        format: 'YYYY-MM-DD',
        valueFormat: 'YYYY-MM-DD',
          </#if>
        </#if>
      },
      </#if>
    },
    </#if>
    </#list>
  ],
  </#if>
});

const [Drawer, drawerApi] = useVbenDrawer({
  title: 'Drawer',
  onCancel: () => {
    drawerApi.close();
  },
  onConfirm: onSubmit,
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      record.value = drawerApi.getData<Record<string, any>>();
      drawerApi.setState({ title: `${handleFormStatus}${functionName}` });
      <#if model?? && model == "tree">
      if (record.value.id) {
        initFun();
      } else {
        formApi.setValues(record.value, false);
      }
      <#else >
      if (record.value.id) {
        initFun();
      }
      </#if>
    }
  },
});

async function initFun() {
  const res = await ${className}QueryByIdApi({ id: record.value.id });
  await formApi.setValues(res, false);
}
async function onSubmit() {
  const { valid } = await formApi.validate();
  const values = await formApi.getValues();
  if (valid) {
    if (record.value.id) {
      const msg = await ${className}EditApi(values);
      message.success(msg);
      await drawerApi.close();
    } else {
      const msg = await ${className}AddApi(values);
      message.success(msg);
      await drawerApi.close();
    }
  }
}
</script>

<template>
  <Drawer>
    <Form />
  </Drawer>
</template>
